<template>
  <!-- 把input重构成下面 -->
  <!-- <input
    type="text"
    v-model="newTodo"
    @keyup.enter="addTodo"
    autofocus
    placeholder="新增今日待办"
    autocomplete="off"
  /> -->
  <!-- v-model="newTodo" = :value="modelValue" + @input="onInputChange" -->
  <!-- v-bind="$attrs" = @keyup.enter="addTodo" + autofocus + placeholder="新增今日待办" + autocomplete="off" -->
  <input
    type="text"
    :value="todoTitle"
    @input="onInputChange"
    v-bind="$attrs"
  />
</template>

<script>
export default {
  props: {
    todoTitle: {
      type: String,
      default: "",
    },
  },
  methods: {
    onInputChange(e) {
      this.$emit("update:todoTitle", e.target.value);
    },
  },
};
</script>

<style lang="scss" scoped></style>
